<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>投币报告</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/timecheck.css" />
		<link rel="stylesheet" href="../fonts/iconfont.css" />
		<script>
			document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';
		</script>
		<style>                                                                                                                                                                                                                                                                                                                                                                              >
			html,
			body,
			#app {
				width: 100%;
				/*height: 100%;*/
				margin-bottom: 0.3rem;
			}
			
			.flex {
				display: flex;
			}
			
			.flex-item {
				flex: 1;
			}
			
			.total-info {
				margin-top: 0.04rem;
				background-color: #FFFFFF;
				text-align: center;
				font-size: 0.22rem;
				line-height: 0.45rem;
			}
			/**/
			
			.division {
				display: flex;
				margin: 15px 0 5px;
			}
			
			.line {
				flex: 2;
				text-align: center;
			}
			
			.line span {
				display: inline-block;
				width: 70%;
				height: 1px;
				background-color: #ccc;
				vertical-align: middle;
			}
			
			.division-word {
				flex: 1;
				text-align: center;
				font-size: 0.24rem;
			}
			/**/
			
			table {
				font-size: 0.22rem;
				width: 100%;
				text-align: center;
				margin-top: 0.1rem;
			}
			
			table tr td {
				padding: 0.1rem 0;
				height: 0.8rem;
			}
			table,
			table,
			tbody,td div{
				text-align: center;
				font-size: 0.2rem;
			}
			td span{
				display: inline-block;
				text-align: left;
				vertical-align: middle;
			}
			.bglight {
				background-color: #FFFFFF;
			}
			
			.tab-head {
				background-color: #FFFFFF;
				line-height: 0.5rem;
			}
			/**/
			
			.mui-bar-tab .mui-tab-item.mui-active {
				color: #ff6600;
			}
			/**/
			
			.mui-scroll-wrapper {
				top: 0;
				bottom: 0px;
				overflow-y: scroll;
			}
			.light {
				color: #8e8a8a;
			}
			.fixed{
				width: 100%;
				font-size: 0.2rem;
				background-color: white;
				border-top:1px solid #ccc ;
				border-bottom:1px solid #ccc ;
				position: fixed;
				top:1.15rem;
				z-index: 9999999;
			}
			.fixed span{
				display: inline-block;
				text-align: center;
				height: 0.6rem;
				line-height: 0.6rem;
			}
			.display{
				display: none;
			}
		</style>
	</head>
	<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/mui.min.js"></script>
	<script src="../config.js"></script>
	<script src="../common/timeCheck.js"></script>

	<body>
		<div class="mui-content" id="app">
			<!--<div id="refreshContainer" class=" total-scroll-wrapper">-->
				<!--<div class="mui-scroll">-->
					<time-check :type="2" :names='names' :dateType="dateType" :leftdata="totalData.atmCoinSell" :rightdata="totalData.atmCoinInput" leftunit="枚" rightunit="枚" :actnum="actnum" :fromdate="fromDate" :todate='toDate' :top="top"></time-check>
					<div class="total-info flex">
						<div class="flex-item textLeft">币差：{{totalData.atmCoinLose}}枚</div>
						<div class="flex-item textRight">币差率：{{totalData.atmCoinLoseRate}}</div>
					</div>
					<div class="division flex">
						<div class="line"><span></span></div>
						<div class="division-word">
							币差率排名
						</div>
						<div class="line"><span></span></div>
					</div>
					<!---->
					<div :class="isFixed ===true ? 'fixed': 'display'" >
						<span style="width:11%">排行</span>
						<span style="width:20%">门店名</span>
						<span style="width:16%" class="light">ATM数量</span>
						<span style="width:16%" class="light">出币</span>
						<span style="width:16%" class="light">投币</span>
						<span style="width:15%">币差率</span>
					</div>
					<div class="table-box">
						<table>
							<tr class="tab-head ">
								<td style="width:10%">排行</td>
								<td style="width:20%">门店名</td>
								<td style="width:15%" class="light">ATM数量</td>
								<td style="width:15%" class="light">出币</td>
								<td style="width:15%" class="light">投币</td>
								<td style="width:15%">币差率</td>
							</tr>
							<tr v-show="totalData.stores.length !==0 " v-for="(item,index) in totalData.stores" :key="index" @click="toShop(index)" :class="{bglight:index%2===1}">
								<td style="width:10%"><div>{{index+1}}</div></td>
								<td style="width:20%"><div><span>{{item.storeName}}</span></div></td>
								<td style="width:15%"><div><span class="light">{{item.atmDevice ? item.atmDevice+'台' : '--' }}</span></div></td>
								<td style="width:15%"><div><span class="light">{{item.atmCoinSell}}</span></div></td>
								<td style="width:15%"><div><span class="light">{{item.atmCoinInput}}</span></div></td>
								<td style="width:15%"><div><span>{{item.atmCoinLoseRate}}</span></div></td>
							</tr>
						</table>
						<p v-show="totalData.stores.length ===0 " style="width: 100%;text-align: center;height: 0.5rem;line-height: 0.8rem">
							暂无数据
						</p>
					</div>
				<!--</div>-->
			<!--</div>-->
		</div>

		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data: function() {
					return {
						names: {
							leftName: '代币售出',
							rightName: '代币投入'
						},
						fromDate: '',
						toDate: '',
						pageId: '',
						actnum: 0,
						currentShopObj: {},
						totalData: {
							sellCoin: 0,
							recoverCoin: 0,
              stores:[]
						},
            dateType:'',
						isFixed:false,
						top:'1rem'
					}
				},
				created: function() {
					var vm = this
          mui.init({
            beforeback: function() {
              var mainPage = plus.webview.currentWebview().opener()
              mainPage.close();
            }
          });
					mui.plusReady(function() {
						vm.receiveParams();
						vm.initTime();
					});

				},
				mounted:function(){
          window.addEventListener('scroll', this.handleScroll)
				},
				methods: {
//					getNum:function(num,sellCoin) {
//						// if(num>0) {
//						// 	return '+'+num
//						// } else if(num<0) {
//						// 	return num
//						// } else {
//						// 	return 0
//						// }
//						if(num !==0){
//						    return ((num/sellCoin)*100).toFixed(3) +'%';
//						}else{
//						    return 0+'%'
//						}
//					},
          initTime: function() {
            this.date = new Date()
//            var weekday = this.date.getDay();//0:周日，1-6：周一到周六         默认时间为周
//            if(weekday === 0) weekday = 7;
//            var startTime=new Date().getTime() - (24*60*60*1000)*(weekday-1);
//            this.fromDate=new Date(startTime).format('yyyy-MM-dd')
//            this.toDate = new Date(this.date).format('yyyy-MM-dd')

//						默认时间为日
            this.fromDate=new Date(this.date).format('yyyy-MM-dd')
            this.toDate = new Date(this.date).format('yyyy-MM-dd')
          },
					receiveParams: function() {
						var sf = plus.webview.currentWebview();
						this.currentShopObj = sf.currentShopObj;
						this.pageId = sf.pageId
					},
					loadData: function() {
						var vm = this;
//						var  data={
//              fromDate: new Date(vm.fromDate).format('yyyyMMdd'),
//              toDate: new Date(vm.toDate).format('yyyyMMdd'),
//						}
//						console.log(JSON.stringify(data))
						config.ajax({
							url: '/coinstat/total',
							data: {
								fromDate: new Date(vm.fromDate).format('yyyyMMdd'),
								toDate: new Date(vm.toDate).format('yyyyMMdd'),
							},
							success: function(res) {
//							  console.log(JSON.stringify(res))
								if(res.result ===1){
                  vm.totalData=res;
								} else {
									mui.toast(res.erormsg)
								}
							}
						})
					},
//					toPage: function(type) {
//						var title
//						var id
//						var htmlPath
//						if(type !== '2') {
//							if(type === '1') {
//								title = '收入报告'
//								htmlPath = 'income.html'
//								id = 'revenue'
//							} else if(type === '3') {
//								title = '出奖报告'
//								htmlPath = 'rewordReport.html'
//								id = 'rewordReport'
//							}
//							var vm = this
//							mui.openWindow({
//								url: htmlPath,
//								id: id,
//								styles: {
//									titleNView: {
//										titleText: title,
//										titleColor: "#FFFFFF",
//										titleSize: "17px",
//										backgroundColor: "#FF6800",
//										autoBackButton: true,
//										buttons: [{
//											fontWeight: 'normal',
//											fontSize: '18px',
//											float: 'right',
//											fontSrc: "_www/fonts/iconfont.ttf", //wap2app内置字体文件
//											text: "\ue602",
//											onclick: function() {
//												var allPage = plus.webview.all()
//												var nowPage = plus.webview.getWebviewById('index')
//												for(var i = 0; i < allPage.length; i++) {
//													if(allPage[i].getURL() !== nowPage.getURL()) {
//														plus.webview.close(allPage[i]);
//													}
//												}
//											}
//										}],
//										splitLine: {
//											color: "#CCCCCC",
//											height: "1px"
//										}
//									}
//								},
//								extras: {
//									currentShopObj: vm.currentShopObj,
//									pageId: vm.pageId
//								}
//							});
//						}
//					},
					toShop: function(index) {
						var vm = this
						mui.openWindow({
							url: 'coinShopOperated.html',
							id: 'coinShopOperated',
							styles: {
								titleNView: {
									titleText:  vm.totalData.stores[index].storeName,
									titleColor: "#FFFFFF",
									titleSize: "17px",
									backgroundColor: "#FF6800",
									autoBackButton: true,
									buttons: [{
										fontWeight: 'normal',
										fontSize: '18px',
										float: 'right',
										fontSrc: "_www/fonts/iconfont.ttf", //wap2app内置字体文件
										text: "\ue602",
										onclick: function() {
											var allPage = plus.webview.all()
											var nowPage = plus.webview.getWebviewById('index')
											for(var i = 0; i < allPage.length; i++) {
												if(allPage[i].getURL() !== nowPage.getURL()) {
													plus.webview.close(allPage[i]);
												}
											}
										}
									}],
									splitLine: {
										color: "#CCCCCC",
										height: "1px"
									}
								}
							},
							extras: {
								currentShopObj: vm.currentShopObj,
								pageId: vm.pageId,
								storeId: vm.totalData.stores[index].storeId,
								storeName: vm.totalData.stores[index].storeName,
								fromDate: vm.fromDate,
								toDate: vm.toDate,
								actnum: vm.actnum,
								dateType:vm.dateType,
                lastPage:false,
							}
						});
					},
          handleScroll:function(){
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
            if(scrollTop > 160 ){
              vm.isFixed=true;
              vm.top='1.75rem'
            }else {
              vm.isFixed=false;
              vm.top='1.18rem'
            };
					},
				},
				watch: {
					fromDate: function() {
						this.loadData()
					}
				}
			})
		</script>
	</body>

</html>